import React, { Component } from 'react'
import { connect } from 'react-redux'
import HeaderSelector from './../../components/header-selector/header-selector'
import { Redirect } from 'react-router-dom'
import { updateUser } from './../../redux/action'
import { NavBar, InputItem, TextareaItem, Button } from 'antd-mobile'
class DashenInfo extends Component {
  constructor(props) {
    super(props)
    this.state = {
      header: '',
      info: '',
      post: ''
    }
  }
  handleChange = (name, val) => {
    this.setState({
      [name]: val
    })
  }
  setHeader = header => {
    this.setState({ header })
  }
  render() {
    const { user } = this.props
    if (user.header) {
      return <Redirect to="/dashen" />
    }
    return (
      <div>
        <NavBar>大神信息完善</NavBar>
        <HeaderSelector setHeader={this.setHeader} />
        <InputItem onChange={val => this.handleChange('post', val)}>
          求岗职位：
        </InputItem>
        <TextareaItem
          title="个人介绍:"
          rows={3}
          onChange={val => this.handleChange('info', val)}
        />
        <Button
          type="primary"
          onClick={() => this.props.updateUser(this.state)}
        >
          保存
        </Button>
      </div>
    )
  }
}

export default connect(
  state => ({ user: state.user }),
  { updateUser }
)(DashenInfo)
